<template>
  <div id="changedialog">
    <commonformdialog
      :isshowDialogs="isshowDialog"
      :dialogTitle="dialogTitle"
      @closetextDialog="closetextDialog"
      @confirmbtn="confirmbtn"
    >
      <div class="innerLoding">
        <el-row>
          <el-form
            :model="formData"
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
            size="small"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="类型:" prop="group">
                  <el-select
                    v-model="formData.group"
                    placeholder="请选择类型"
                    style="width: 100%"
                  >
                    <el-option
                      :label="courseItem.lable"
                      :value="courseItem.value"
                      v-for="(courseItem, index) in groupOptions"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="级别:" prop="is_charge">
                  <el-radio-group v-model="formData.is_charge">
                    <el-radio :label="0">普通</el-radio>
                    <el-radio :label="1">VIP</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="范围:" prop="genre">
                  <el-select
                    v-model="formData.genre"
                    clearable
                    multiple
                    collapse-tags
                    filterable
                    placeholder="请选择范围"
                    style="width: 100%"
                  >
                    <el-option
                      :label="chapterItem.title"
                      :value="chapterItem.id"
                      v-for="(chapterItem, index) in genreList"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="题型:" prop="course">
                  <el-select
                    v-model="formData.course"
                    placeholder="请选择题型"
                    style="width: 100%"
                  >
                    <el-option
                      :label="courseItem.lable"
                      :value="courseItem.value"
                      v-for="(courseItem, index) in courseOptions"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="章节:" prop="chapter">
                  <el-select
                    v-model="formData.chapter"
                    placeholder="请选择章节"
                    style="width: 100%"
                  >
                    <el-option
                      :label="chapterItem.title"
                      :value="chapterItem.id"
                      v-for="(chapterItem, index) in chapterOptions"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态:" prop="status">
                  <el-select
                    v-model="formData.status"
                    placeholder="请选择状态"
                    style="width: 100%"
                  >
                    <el-option
                      :label="statusItem.lable"
                      :value="index"
                      v-for="(statusItem, index) in statusOptions"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="知识点:" prop="knowledge_point">
                  <el-select
                    v-model="formData.knowledge_point"
                    clearable
                    multiple
                    collapse-tags
                    filterable
                    placeholder="请选择知识点"
                    style="width: 100%"
                  >
                    <el-option
                      :label="chapterItem.title"
                      :value="chapterItem.id"
                      v-for="(chapterItem, index) in knowledgePoint"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="技巧点:" prop="skill_point">
                  <el-select
                    v-model="formData.skill_point"
                    clearable
                    multiple
                    collapse-tags
                    filterable
                    placeholder="请选择技巧点"
                    style="width: 100%"
                  >
                    <el-option
                      :label="statusItem.title"
                      :value="statusItem.id"
                      v-for="(statusItem, index) in skillPoint"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="封面图:" prop="head_img">
                  <uploadimg
                    :imgModel="formData"
                    @deleteimg="picturedel"
                    class="uploaditem"
                    @uploadimgok="pictureok"
                    :filedata='filedata'
                  >
                    <span slot="text">上传的图片大小不得超过10M</span>
                  </uploadimg>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="题干:" prop="content">
                  <el-input
                    type="textarea"
                    v-model="formData.content"
                    :rows="3"
                    resize="none"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="类型:" prop="type">
                  <el-radio-group v-model="formData.type">
                    <el-radio :label="0">判断</el-radio>
                    <el-radio :label="1">单选</el-radio>
                    <el-radio :label="2">多选</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="答案:" prop="answer">
                  <el-select
                    v-model="formData.answer"
                    placeholder="请选择答案"
                    style="width: 100%"
                    multiple
                  >
                    <el-option
                      :label="answerItem.lable"
                      :value="answerItem.lable"
                      v-for="(answerItem, index) in answerOptions"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="选项A:" prop="planA">
                  <el-input
                    v-model="formData.planA"
                    placeholder="请输入选项A"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="选项B:" prop="planB">
                  <el-input
                    v-model="formData.planB"
                    placeholder="请输入选项B"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="选项C:" prop="planC">
                  <el-input
                    v-model="formData.planC"
                    placeholder="请输入选项C"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="选项D:" prop="planD">
                  <el-input
                    v-model="formData.planD"
                    placeholder="请输入选项D"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="解析:" prop="comments">
                  <el-input
                    type="textarea"
                    v-model="formData.comments"
                    :rows="3"
                    resize="none"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="技巧:" prop="skill">
                  <el-input
                    type="textarea"
                    v-model="formData.skill"
                    :rows="3"
                    resize="none"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="备注:" prop="remark">
                  <el-input
                    type="textarea"
                    v-model="formData.remark"
                    :rows="3"
                    resize="none"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-row>
      </div>
    </commonformdialog>
  </div>
</template>

<script type="text/javascript">
//引入弹窗
import commonformdialog from "@/components/commondialog/commondialog";
import uploadimg from "@/components/uploadimg/uploadimg";

import { questionCreate, questionUpdate } from "@/api/questionBank";
export default {
  data() {
    return {
       filedata:{category:'question'},
      formData: {
        is_charge: 0,
        course: 1,
        chapter: null,
        head_img: null,
        status: null,
        content: null,
        type: 0,
        genre: null,
        answer: [],
        planA: null,
        planB: null,
        planC: null,
        planD: null,
        comments: null,
        skill: null,
        remark: null,
        head_type: null,
      },
      genreList: [
        { title: "小车", id: 1 },
        { title: "货车", id: 2 },
        { title: "客车", id: 3 },
        { title: "摩托车", id: 4 },
        { title: "资格证", id: 5 },
      ],
      groupOptions: [
        { lable: "驾驶证", value: 1 },
        { lable: "资格证", value: 2 },
      ],
      rules: {
        is_charge: [
          {
            required: true,
            message: "请选择级别",
            trigger: "blur",
          },
        ],
        group: [
          {
            required: true,
            message: "请选择类型",
            trigger: "blur",
          },
        ],
        course: [
          {
            required: true,
            message: "请选择题型",
            trigger: "blur",
          },
        ],
        chapter: [
          {
            required: true,
            message: "请选择章节",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择状态",
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: "请输入题干",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择类型",
            trigger: "blur",
          },
        ],
        genre: [
          {
            required: true,
            message: "请选择范围",
            trigger: "blur",
          },
        ],
        answer: [
          {
            required: true,
            message: "请选择答案",
            trigger: "blur",
          },
        ],
        planA: [
          {
            required: true,
            message: "请输入选项A",
            trigger: "blur",
          },
        ],
        planB: [
          {
            required: true,
            message: "请输入选项B",
            trigger: "blur",
          },
        ],
        planC: [],
        planD: [],
        comments: [
          {
            required: true,
            message: "请输入解析",
            trigger: "blur",
          },
        ],
      },
      statusOptions: [
        {
          lable: "未处理",
        },
        {
          lable: "已完成同步",
        },
        {
          lable: "图片有水印",
        },
        {
          lable: "图片不存在",
        },
        {
          lable: "图片不匹配",
        },
        {
          lable: "其他",
        },
      ],
      courseOptions: [
        {
          lable: "科一",
          value: 1,
        },
        {
          lable: "科四",
          value: 4,
        },
      ],
      answerOptions: [
        {
          lable: "A",
        },
        {
          lable: "B",
        },
        {
          lable: "C",
        },
        {
          lable: "D",
        },
      ],
    };
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: "",
      required: true,
    },
    //是编辑还是新增
    formType: {
      type: Number,
      default: 0,
    },
    //章节数组
    chapterOptions: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //章节数组
    skillPoint: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //章节数组
    knowledgePoint: {
      type: Array,
      default: () => {
        return [];
      },
    },
    dialogdata: {
      type: Object,
    },
    course: {
      type: Number,
    },
    course: {
      type: Number,
    },
    groupparams: {
      type: Number,
    },
  },
  components: {
    commonformdialog,
    uploadimg,
  },
  methods: {
    closetextDialog() {
      this.$emit("closedialog");
    },
    //删除图片
    picturedel() {
      this.formData.head_img = "";
    },
    //上传图片成功
    pictureok(val) {
      this.formData.head_type = val.type;
      this.formData.head_img = val.url;
    },
    confirmbtn() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (!valid) return;
        let {answer,chapter,comments,content,course,genre,group,head_img,head_type,is_charge,knowledge_point,skill_point,planA,planB,planC,planD,remark,status,type,skill}={...this.formData}
        let params = {answer,chapter,comments,content,course,genre,group,head_img,head_type,is_charge,knowledge_point,skill_point,planA,planB,planC,planD,remark,status,type,skill};
        params._request = this.course;
        let answerp=''
        params.answer.forEach((p)=>{
              answerp+=p
        });
        params.answer = answerp
        if (params.knowledge_point) {
          params.knowledge_point = params.knowledge_point.join(",");
        }
        if (params.skill_point) {
          params.skill_point = params.skill_point.join(",");
        }
        if (params.genre) {
          params.genre = params.genre.join(",");
        }
        let data;
        if (this.formType == 0) {
          data = await questionCreate(params);
        } else {
          params.id=this.formData.id
          data = await questionUpdate(params);
        }
        if (data.code == "0000") {
          this.$message({
            type: "success",
            message: data.msg,
          });
          this.$emit("confirm");
        }
      });
    },
  },
  watch: {
    isshowDialog: function (val) {
      if (!val) {
        this.$refs["ruleForm"].resetFields();
        console.log(this.formData);
      } else {
        console.log(this.groupparams);
        if (this.groupparams == 1) {
          this.groupOptions = [{ lable: "驾驶证", value: 1 }];
             this.courseOptions = [
            {
              lable: "科一",
              value: 1,
            },
            {
              lable: "科四",
              value: 4,
            },
          ];
          this.formData.group=1
        } else {
          this.groupOptions = [{ lable: "资格证", value: 2 }];
         this.formData.group=2
          this.courseOptions = [
            {
              lable: "客运",
              value: 1,
            },
            {
              lable: "货运",
              value: 2,
            },
            {
              lable: "危险品",
              value: 3,
            },
            {
              lable: "教练员",
              value: 4,
            },
            {
              lable: "出租车",
              value: 5,
            },
          ];
        }
      }
    },
    dialogdata: function (val) {
      this.formData = val;
      this.formData.knowledge_point = this.formData.knowledge_point
        ? this.formData.knowledge_point.split(",").map(Number)
        : null;
      this.formData.skill_point = this.formData.skill_point
        ? this.formData.skill_point.split(",").map(Number)
        : null;
      this.formData.genre = this.formData.genre
        ? this.formData.genre.split(",").map(Number)
        : [];
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
</style>
